<!--
 * @Date: 2022-06-22 09:06:12
 * @LastEditors: CemCode cemoment@aliyun.com
 * @LastEditTime: 2022-11-18 03:24:42
 * @FilePath: \vue-blog-2\src\views\desk\home\Projects.vue
 * @Description: 个人项目集
-->
<template>
  <div class="prjects_main">
    <div class="head_nav">
      <h3>个人项目集</h3>
      <p>这里有展示我所有在做的或上线的个人项目,希望多多支持 <span :style="'color:' + theme.deepColor.deep1_color">(0 w =)</span></p>
    </div>
    <div class="project_con">
      <div class="project_item">
        <img class="project_logo" src="@/assets/cemcode_blog_icon_1.png" />
        <div class="project_info">
          <p>项目名: 个人博客</p>
          <p>状态: <span class="online">上线</span></p>
          <p>平台: PC/移动WEB端</p>
          <p>上线链接: <a href="http://www.cemcode.com">http://www.cemcode.com</a></p>
          <p>gitee链接: <a href="https://gitee.com/cemcode/vue-blog">https://gitee.com/cemcode/vue-blog</a></p>
          <p>简介: 用vue2开发的个人博客项目,有时间会迭代成vue3技术栈,现在还是处于填坑状态,持续更新,希望多多支持.gitee上有包含后端项目</p>
        </div>
      </div>

      <div class="project_item">
        <img class="project_logo" src="@/assets/cemcode_muyu.jpg" />
        <div class="project_info">
          <p>项目名: 电子木鱼</p>
          <p>状态: <span class="develop">研发</span></p>
          <p>平台: 小程序/APP/IOS</p>
          <p>上线链接: 暂无</p>
          <p>gitee链接: 内部</p>
          <p>简介: 正在和好友开坑，仿电子木鱼项目，会加上自己的一些想法</p>
        </div>
      </div>

      
    </div>
  </div>
</template>
<script>
export default {
  name: "desk-projects",
  data() {
    return {
    }
  },
  computed: {
    theme: function () {
      return this.$store.state.theme
    }
  },
}
</script>
<style lang="scss" scoped>
@media screen and (max-width:600px) {
  .project_item {
    width: 100% !important;
  }

  .project_logo {
    height: 70% !important;
  }
}

.prjects_main {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;

  .head_nav {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.493);
    box-shadow: inset 0 0 15px 10px white;
    color: #333;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;

    >* {
      margin: 5px;
    }
  }

  .project_con {
    width: 100%;
    margin-top: 10px;
    
    .project_item {
      margin: 5px 1.2% 5px 0px;
      display: flex;
      width: 100%;
      height: 200px;
      background-color: white;
      // box-shadow: inset 0 0 15px 10px white;
      border-radius: 5px;
      align-items: center;
      padding: 5px;
      box-sizing: border-box;

      &:nth-child(3n-1) {
        margin: 5px 0;
      }

      &:nth-child(3n) {
        margin-right: 0px;
        margin-left: 1.2%;
      }

      .project_logo {
        box-sizing: border-box;
        padding: 10px;
        height: 90%;
      }

      .project_info {
        height: 90%;
        box-sizing: border-box;
        border-left: 1px dotted #ccc;
        padding-left: 10px;
        font-size: 0.8em;
        color: #333;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          display: none;
        }

        >p {
          margin-bottom: 5px;

          >a {
            color: rgb(0, 183, 255);
          }
        }

        .online {
          background-color: rgb(14, 172, 0);
          color: white;
          padding: 1px 3px;
          border-radius: 3px;
        }

        .develop {
          background-color: rgb(0, 103, 172);
          color: white;
          padding: 1px 3px;
          border-radius: 3px;
        }
      }
    }



  }
}
</style>